<?php
	require_once("lib/includes.php");

	DB::Connect();
?>

	<html>
	<head>
		<title>Open 20 questions</title>

		<link href="css/site.css" rel="stylesheet" type="text/css" />
		<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />

		<link rel="stylesheet/less" type="text/css" href="css/less/style.less" /> <!--less-->
		<script src="lib/plugins/less-1.6.0.min.js" type="text/javascript"></script> <!--less-->


		<script src="jquery/jquery-1.10.2.min.js" type="text/javascript"></script>
		<script src="jquery/jquery-ui-1.10.3.js" type="text/javascript"></script>

		<script src="jquery/jquery.tmpl.min.js" type="text/javascript"></script>
		<script src="jquery/jquery.tmplPlus.min.js" type="text/javascript"></script>
		<script src="lib/plugins/JSON.js" type="text/javascript"></script>
		<script src="lib/plugins/PreventSubmit.js"></script>
		<script src="lib/plugins/PHPWebPage.js"></script>

		<script src="gametest.js"></script>

		<script>
			$(document).ready(function(){
				var page = new GamePage();
				page.initializeControls();
			});
		</script>

		<script id="tmplQuestion" type="text/x-jquery-tmpl">
			<div class="hide record${par}">
				<div class="column1">${QuestionIndex}</div>
				<div class="column2">${Question}</div>
				<div class="column3"><span id="question${QuestionIndex}"></span></div>
				<div class="column4"><span id="expectedAnswer${QuestionIndex}"></span></div>
				<div class="clear"></div>
			</div>
		</script>

		<script id="tmplResponse" type="text/x-jquery-tmpl">
			<p>I thought of:</p>
			<p><span class="guessed_object">${ObjectName}</span></p>

			<p id="feedback_buttons">
				<a href="javascript:void(0);" id="btnCorrectAnswer">Correct</a>
				&nbsp;
				<a href="javascript:void(0);" id="btnIncorrectAnswer">Incorrect</a>
			</p>
		</script>

		<script id="tmplTopGuesses" type="text/x-jquery-tmpl">
			<a href="javascript:void(0);" class="${Class}"
				data-id="${ObjectId}"
				data-name="${Name}">${Index}${Dot}${Name}</a>
			<div class="clear"></div>
		</script>

	</head>

	<body>
		<div class="wrapper game_page">
			<?php require_once("menu.php"); ?>

			<div id="loading-indicator">
				<img src="images/ajax-loader.gif" alt='Loading...'/>
			</div>

			<p class="current_question_number">Question <span id="current_questions_number"></span></p>

			<p class="current_question_content">Is your character a female ?</p>

			<div id="wrapper-possible-answers">
				<a href="javascript:void(0);" id="btnAnswerYes">Yes</a>
				<a href="javascript:void(0);" id="btnAnswerNo">No</a>
				<a href="javascript:void(0);" id="btnAnswerDontKnow">Don't know</a>
				<a href="javascript:void(0);" id="btnAnswerProbablyYes">Probably yes</a>
				<a href="javascript:void(0);" id="btnAnswerProbablyNo">Probably no</a>
			</div>


			<div id="wrapper-response" class="hide">

			</div>

			<p id="feedback_accepted_amswer_machine_message" class="hide">
				Ok, glad I got it right!
			</p>

			<div id="wrapper-top-guesses" class="hide">
				<p id="feedback-sorry-message" class="hide">
					Is it one of these?
				</p>

			</div>

			<div id="selected-top-guess" class="hide">

			</div>

			<div id="divUserInputAnswer" class="hide">
				<p>Ok, tell us who it was then:</p>
				<input type="text" id="txtObjectName" value="">

				<div class="clear"></div>

				<a href="javascript:void(0);" id="btnSubmitAddNew">Submit</a>
			</div>

			<div id="gridQuestionList">
				<div class="play_again hide">
					<a href="game.php" class="guessed_object">Play again!</a>
				</div>
				<div class="records">
					<div class="header">
						<div class="column1">#</div>
						<div class="column2">Question</div>
						<div class="column3">Answer</div>
						<div class="column4">Expected</div>
						<div class="clear"></div>
					</div>
					<div class="clear"></div>
				</div>
			</div>

		<?php
		// create game

		// TODO: show error if game has expired
		// TODO: fix error on browser back even if game hasn't expired


		DB::Query("insert into Games (LastActivity) values (now())");

		$gameId = (int)DB::LastInserted();

		// create the game instance by copying all objects to the GamesInstances table
		DB::Query("insert into GamesInstances (GameID, ObjectID) select $gameId, ObjectID from Objects");
		?>

		<input type="hidden" value="<?php echo $gameId; ?>" id="idGame" />

		<footer>

		</footer>
	</div>
	</body>
	</html>
<?php
	DB::Disconnect();
?>